<template>
  <!-- 菜品管理页面 -->
  <div>
    <div class="footer">
      <el-input v-model="input" style="width:200px" placeholder="请输入菜品名称" @keydown.enter.native="slesctlist" />
      <div class="redder">
        <el-link type="danger" @click="deleteDishitem(SelectList.id)">批量删除</el-link>
        <el-link style="margin-left:20px" type="success" @click="allhandleClick(1)">批量启售</el-link>
        <el-link style="margin-left:20px" type="danger" @click="allhandleClick(0)">批量停售</el-link>
        <el-button style="margin-left:20px" type="warning" @click="addvariety">新建菜品</el-button>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="bgDate"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="菜品名称"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column
        prop="image"
        label="图片"
        width="120"
      >
        <template slot-scope="scope">
          <el-image :src="getUrl(scope.row.image)" style="width: 50px;height: 50px" />
        </template>
      </el-table-column>
      <el-table-column
        prop="categoryName"
        label="菜品分类"
        show-overflow-tooltip
      />
      <el-table-column
        prop="price"
        label="售价"
        show-overflow-tooltip
      />
      <el-table-column
        prop="status"
        label="售卖状态"
      ><template v-slot="{ row }">
        {{ row.status | filterStatus }}
      </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="最后操作时间"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        width="180"
      >
        <template slot-scope="scope">
          <el-link type="primary" style="margin-right:10px" @click="edit(scope.row.id)">修改</el-link>
          <el-link v-show="scope.row.status===0" type="primary" style="margin-right:10px" @click="handleClick(scope.row)">启售</el-link>
          <el-link v-show="scope.row.status===1" type="primary" style="margin-right:10px" @click="handleClick(scope.row)">停售</el-link>
          <el-link type="danger" @click="deleteDishitem(scope.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagintionstyle">
      <PAL
        ref="mychild"
        :total="total"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        :date-source="bgDate"
        @sizeChange="sizeChange"
        @currentPage="currentPage1"
        @showDate="showDate"
      />

    </div>
  </div>
</template>

<script>
import { getDishPage, dishStatusByStatus, deleteDish } from '@/api/food'
import pagination from '@/components/Pagination/pagination.vue'
export default {
  components: {
    PAL: pagination
  },
  filters: {
    filterStatus(item) {
      if (item === 1) {
        return '启售'
      } else {
        return '停售'
      }
    }
  },
  data() {
    return {
      input: '',
      bgDate: [],
      multipleSelection: [],
      total: 20,
      loading: false,
      currentPage: 1,
      pageSize: 10,
      SelectList: []
    }
  },
  mounted() {
    this.getDishPagelist(this.currentPage, this.pageSize)
  },
  methods: {
    getUrl(image) {
      return `${process.env.VUE_APP_BASE_API}/common/download?name=${image}`
    },
    // 查询
    async getDishPagelist(page, pageSize, name) {
      this.loading = true
      try {
        const xixi = await getDishPage({ page: page, pageSize: pageSize, name: this.input })
        this.bgDate = xixi.records
        this.total = xixi.total
        this.loading = false
      } catch { console.error('查询失败') }
    },
    // 搜索
    async slesctlist() {
      this.getDishPagelist(this.currentPage, this.pageSize, this.input)
    },
    // 多选---状态改变自动触发事件
    handleSelectionChange(val) {
      this.SelectList.id = val.map((item) => {
        return item.id
      }).toString()
    },
    // 启售停售按钮
    async handleClick(xixi) {
      if (xixi.status === 0) {
        xixi.status = 1
      } else {
        xixi.status = 0
      }
      this.dishStatusByStatusall(xixi)
    },
    // 批量启售停售按钮
    async allhandleClick(status) {
      this.SelectList.status = status
      this.dishStatusByStatusall(this.SelectList)
    },
    // 起售停售---批量起售停售
    async dishStatusByStatusall(xixi) {
      this.loading = true
      try {
        await dishStatusByStatus(xixi)
        await this.getDishPagelist(this.currentPage, this.pageSize)
        this.$message.success('修改成功')
      } catch { console.error('修改失败') }
    },
    // 删除---批量删除
    async deleteDishitem(id) {
      try {
        await deleteDish(id)
        await this.getDishPagelist(this.currentPage, this.pageSize)
        this.$message.success('删除成功')
      } catch {
        this.$message.error('删除成功')
        console.error('删除失败')
      }
    },
    // 接收子组件传来的数据
    showDate(response) {
      console.log('接收子组件传来的数据', response)
    },
    // 当前页改变
    currentPage1(response) {
      console.log(`当前页: ${response}`)
      this.getDishPagelist(response, this.pageSize)
    },
    // 每页条数改变
    sizeChange(response) {
      this.getDishPagelist(1, response)
      this.sizeChangeval = response
      console.log(`每页 ${response} 条`)
      console.log(response)
    },
    // 新增菜品
    addvariety() {
      this.$router.push({
        path: 'index/formlist',
        query: {
          title: '新增菜品'
        }
      })
    },
    // 编辑菜品
    edit(xixi) {
      this.$router.push({
        path: 'index/formlist',
        query: {
          title: '编辑菜品',
          id: xixi
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.footer{
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.redder{
  display: flex;
}
.pagintionstyle{
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

